<template>
  <div
    class="WorkingSchedule"
    v-loading="loading"
    element-loading-text="拼命加载中"
  >
    <el-form
      size="mini"
      ref="form"
      :model="form"
      label-position="top"
      class="myform"
    >
      <div>
        <el-form-item label="款号/SKU" class="myform-item">
          <el-input
            v-model="form.type_no"
            placeholder="请输入款号或SKU"
            @keyup.enter.native="onSearch"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="款名/部件名" class="myform-item">
          <el-input
            v-model="form.title"
            placeholder="请输入款号或SKU"
            @keyup.enter.native="onSearch"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item style="margin-top: 39px">
          <el-button type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
      </div>
      <div></div>
    </el-form>

    <el-table
      ref="mytable"
      size="mini"
      :data="tableData"
      style="width: 100%"
      border
      :summary-method="getSummaries"
      show-summary
    >
      <el-table-column label="图片" align="center" prop="img" width="150">
        <template slot-scope="{ row }">
          <el-image
            :src="row.img"
            v-if="row.img"
            fit="fill"
            :preview-src-list="[row.img]"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column
        label="款号"
        align="center"
        prop="type_no"
      ></el-table-column>
      <el-table-column
        label="SKU"
        align="center"
        prop="product_code"
      ></el-table-column>
      <el-table-column
        label="款名"
        align="center"
        prop="product_name"
      ></el-table-column>
      <el-table-column
        label="部件"
        align="center"
        prop="a_parts"
      ></el-table-column>
      <el-table-column label="库存" align="center" prop="num">
        <template slot-scope="{ row }"
          ><span
            style="font-weight: 600"
            :style="{ color: row.num > 0 ? 'red' : '#67C23A' }"
            >{{ row.num || 0 }}</span
          ></template
        >
      </el-table-column>
      <el-table-column label="可销数" align="center" prop="use_num">
        <template slot-scope="{ row }"
          ><span
            style="font-weight: 600"
            :style="{ color: row.use_num > 0 ? 'red' : '#67C23A' }"
            >{{ row.use_num || 0 }}</span
          ></template
        >
      </el-table-column>
      <el-table-column
        label="在途数"
        align="center"
        prop="qty"
      ></el-table-column>
    </el-table>
    <pagination
      :form="form"
      :total="total"
      @paginationPostOrderTaskList="postAdminOperateget_jyamout"
    />
  </div>
</template>

<script>
import { postAdminOperateget_jyamout } from "@/api";
import pagination from "@/components/pagination.vue";
export default {
  components: { pagination },
  data() {
    return {
      loading: false,
      browserHeight: "",
      height: `${document.documentElement.clientHeight - 400}`,
      form: {
        title: "",
        type_no: "",
        page: 1,
        size: 20,
      },
      tableData: [],
      total: 1,
    };
  },
  async activated() {
    let browserHeight =
      window.innerHeight ||
      document.documentElement.clientHeight ||
      document.body.clientHeight;
    this.browserHeight = browserHeight - 290;
    this.postAdminOperateget_jyamout(this.form);
  },
  methods: {
    // 合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (
          !values.every((value) => isNaN(value)) &&
          (column.label == "库存" || column.label == "可销数")
        ) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] = sums[index];
        } else {
          sums[index] = "--";
        }
      });

      return sums;
    },
    // 采购列表
    async postAdminOperateget_jyamout(data) {
      this.loading = true;
      this.form = data;
      postAdminOperateget_jyamout(data)
        .then((res) => {
          this.loading = false;
          console.log("采购列表", res);
          this.savetime = res.savetime;
          this.tableData = res.data;
          this.total = Number(res.total);
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    // 搜索
    async onSearch() {
      this.form.page = 1;
      this.form.size = 20;
      await this.postAdminOperateget_jyamout(this.form);
      await this.postAdminOperateget_jyamout(this.form);
    },
  },
};
</script>

<style lang="scss" scoped>
.searchleft {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 3px;
  .searchleft-button {
    text-align: center;
    height: 28px;
    width: 60px;
    line-height: 28px;
    background: #eee;
    color: #000;
  }
  /deep/ .el-select {
    width: 140px;
    display: inline-block;
    input {
      font-size: 12px;
      border: none;
      background: none;
    }
  }
}
.date {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  /deep/ .el-button--mini {
  }
  .date-left {
    display: flex;
    align-items: center;
    .date-left-time {
      display: flex;
      align-items: center;
      .date-left-time-button {
        border: 1px solid #ddd;
        height: 28px;
        width: 36px;
        text-align: center;
        line-height: 28px;
        border-radius: 4px;
        color: #999;
      }
      .date-left-time-list {
        display: flex;
        margin: 0 10px;
        > div {
          height: 28px;
          width: 140px;
          text-align: center;
          line-height: 28px;
          border: 1px solid #ddd;
        }
        > div:not(:nth-child(1)) {
          border-left: none;
        }
        > div:nth-child(1) {
          border-top-left-radius: 4px;
          border-end-start-radius: 4px;
        }
        > div:nth-last-child(1) {
          border-top-right-radius: 4px;
          border-end-end-radius: 4px;
        }
      }
    }
  }
}
.borderSelect {
  border: 1px solid #2e71d6 !important;
  background: rgba(46, 113, 214, 0.1);
  color: #2e71d6;
}
.myform {
  display: flex;
  justify-content: space-between;
  > div {
    display: flex;
  }
  &-item {
    margin-right: 10px;
  }
}
.WorkingSchedule {
  background: #ffff;
  padding: 20px;
  border-radius: 2px;
  @include boxShadow;
  font-size: 14px;
}
</style>
